/* eslint-disable eqeqeq */
<template>
  <page-container>
    <el-card shadow="never">
      <template #header>
        数据筛选
      </template>
      <el-form
        :inline="true"
        ref="form"
      >
        <el-form-item label="标题">
          <el-input
            clearable
            placeholder="数据筛选接口暂不支持"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            disabled
            native-type="submit"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <template #header>
        <el-button
          type="primary"
          @click="dialogVisible = true"
        >
          新增
        </el-button>
      </template>
      <el-table
        :data="list"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="title"
          label="标题"
        />
        <el-table-column
          prop="content"
          label="内容"
          align="left"
          min-width="380"
        />
        <el-table-column
          prop="dateAdd"
          label="创建日期"
          align="center"
        />
        <el-table-column
          label="是否显示"
          min-width="100"
          align="center"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.isShow"
              :loading="scope.row.isShowLoading"
              @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          min-width="100"
          align="center"
        >
          <template #default="scope">
            <el-button
              @click="handleUpdate(scope.row.id)"
              type="text"
            >
              编辑
            </el-button>
            <el-popconfirm
              title="确认删除吗？"
              @confirm="handleDelete(scope.row.id)"
            >
              <template #reference>
                <el-button type="text">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <app-page-container
        v-model:page="listParams.page"
        v-model:limit="listParams.pageSize"
        :total="listCount"
        :fn="getList"
        :disabled="listLoading"
      />
    </el-card>
    <list-form
      v-model="dialogVisible"
      @success="handleSuccess"
      v-model:article-id="articleId"
    />
  </page-container>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import { getArticleList, deleteArticle, addArticle } from '@/api/cms'
import type { Ilistdata, IArticleparams } from '@/api/types/cms'
import listForm from './listform.vue'
import { ElMessage } from 'element-plus'

const list = ref<Ilistdata[]>([]) // 公告列表
const listCount = ref(0)
const listLoading = ref(true)
const articleId = ref<number | null>(null)
const listParams = reactive({ // 查询管理参数
  page: 1, // 当前页码
  pageSize: 10 // 每页大小
})

const dialogVisible = ref(false)

const getList = async () => {
  listLoading.value = true
  const data = await getArticleList(listParams).finally(() => {
    listLoading.value = false
  })
  const datalist = data.data.result
  list.value = datalist
  listCount.value = data.data.totalRow
}

const handleStatusChange = async (item: IArticleparams) => {
  const formData = {
    content: item.content,
    isShow: item.isShow,
    title: item.title,
    type: item.type,
    id: item.id
  }
  item.isShowLoading = true
  await addArticle(formData).finally(() => {
    item.isShowLoading = false
  })
  ElMessage.success(`${item.isShow ? '显示' : '隐藏'}`)
}

const handleUpdate = async (id: number) => {
  articleId.value = id
  dialogVisible.value = true
}

const handleDelete = async (id: number) => {
  await deleteArticle({ id: id })
  ElMessage.success('删除成功')
  getList()
}

const handleSuccess = () => {
  dialogVisible.value = false
  getList()
}

onMounted(() => {
  getList()
})

</script>

<style lang="scss" scoped></style>
